{% extends "base.html" %}

{% block title %}用户信息 - Camera Pi{% endblock %}

{% block sidebar %}
<div class="list-group list-group-flush">
    <a href="/manage/archive" class="list-group-item list-group-item-action">
        <i class="bi bi-archive"></i> 视频归档管理
    </a>
    <a href="/manage/alert" class="list-group-item list-group-item-action">
        <i class="bi bi-bell"></i> 报警设置
    </a>
    <a href="/manage/user" class="list-group-item list-group-item-action active">
        <i class="bi bi-person"></i> 用户信息
    </a>
</div>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 mb-4">
            <h2><i class="bi bi-person"></i> 用户信息</h2>
            <p class="lead">管理系统用户和权限</p>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-body text-center">
                    <img src="https://via.placeholder.com/150" class="rounded-circle mb-3" alt="用户头像">
                    <h5 class="card-title">管理员</h5>
                    <p class="text-muted">admin@example.com</p>
                    <button class="btn btn-outline-primary btn-sm" onclick="changeAvatar()">
                        <i class="bi bi-camera"></i> 更换头像
                    </button>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">系统信息</h5>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            系统版本
                            <span class="badge bg-primary rounded-pill">v1.0.0</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            最后登录
                            <span class="text-muted">2024-02-20 10:30</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            登录IP
                            <span class="text-muted">192.168.1.100</span>
                        </li>
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            在线状态
                            <span class="badge bg-success rounded-pill">在线</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">个人信息</h5>
                </div>
                <div class="card-body">
                    <form id="userForm">
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">用户名</label>
                                <input type="text" class="form-control" id="username" value="admin">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">邮箱</label>
                                <input type="email" class="form-control" id="email" value="admin@example.com">
                            </div>
                        </div>
                        
                        <div class="row mb-3">
                            <div class="col-md-6">
                                <label class="form-label">手机号</label>
                                <input type="tel" class="form-control" id="phone" value="13800138000">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">角色</label>
                                <select class="form-select" id="role">
                                    <option value="admin">管理员</option>
                                    <option value="user">普通用户</option>
                                    <option value="guest">访客</option>
                                </select>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">个人简介</label>
                            <textarea class="form-control" id="bio" rows="3">系统管理员</textarea>
                        </div>
                        
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-save"></i> 保存修改
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="card-title mb-0">修改密码</h5>
                </div>
                <div class="card-body">
                    <form id="passwordForm">
                        <div class="mb-3">
                            <label class="form-label">当前密码</label>
                            <input type="password" class="form-control" id="currentPassword">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">新密码</label>
                            <input type="password" class="form-control" id="newPassword">
                        </div>
                        
                        <div class="mb-3">
                            <label class="form-label">确认新密码</label>
                            <input type="password" class="form-control" id="confirmPassword">
                        </div>
                        
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-key"></i> 修改密码
                        </button>
                    </form>
                </div>
            </div>
            
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">登录记录</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>IP地址</th>
                                    <th>设备</th>
                                    <th>状态</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2024-02-20 10:30</td>
                                    <td>192.168.1.100</td>
                                    <td>Chrome / Windows</td>
                                    <td><span class="badge bg-success">成功</span></td>
                                </tr>
                                <tr>
                                    <td>2024-02-19 15:45</td>
                                    <td>192.168.1.100</td>
                                    <td>Firefox / macOS</td>
                                    <td><span class="badge bg-success">成功</span></td>
                                </tr>
                                <tr>
                                    <td>2024-02-18 09:15</td>
                                    <td>192.168.1.101</td>
                                    <td>Safari / iOS</td>
                                    <td><span class="badge bg-danger">失败</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 更换头像
function changeAvatar() {
    // 实现更换头像功能
}

// 保存个人信息
document.getElementById('userForm').addEventListener('submit', function(e) {
    e.preventDefault();
    // 实现保存个人信息功能
});

// 修改密码
document.getElementById('passwordForm').addEventListener('submit', function(e) {
    e.preventDefault();
    // 实现修改密码功能
});

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 初始化页面
});
</script>
{% endblock %} 